<template>
  <div class="root-box">
    <el-tooltip class="item" effect="dark" :content="tipMsg" placement="top"
    :manual="true"
    v-model="tipShow"
    popper-class="tip-warn"
    >
      <el-select v-model="propForm[propFieldModel]" filterable :placeholder="propPlaceholder"  @change="change" :disabled="disabled" ref="fortenFormSelect">
        <el-option v-for="item in getData(true)"
                   :key="item[propFieldValue]"
                   :label="item[propFieldTextLeft]"
                   :value="item[propFieldValue]">
          <span style="float: left; width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{ item[propFieldTextLeft] }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px" v-show="strings.isNotBlank(propFieldTextRight)">{{ item[propFieldTextRight] }}</span>
        </el-option>
      </el-select>
    </el-tooltip>
  </div>
</template>

<script>
import utilVuex from '../../util/utilVuex.js'

export default {
  name: 'FortenFormSelect',
  props: {
    //上级对象  【必须】
    propThat: Object,

    //表单对象  【必须】
    propForm: Object,

    //绑定字段  【必须】
    propFieldModel: String,

    //文本字段  【必须，当所选【propFieldModel】在可选列表中不存在的时候，默认追加】
    propTextModel: String,

    //下拉框值字段  【必须】
    propFieldValue: String,

    //左边显示字段  【必须】
    propFieldTextLeft: String,

    //右边显示字段  【非必须】
    propFieldTextRight: String,

    //获取数据的vuex方法名,参考utilVuex.js里面的可选列表  【必须】
    propVuexFunName: {String, default: null},

    //输入占位符
    propPlaceholder: {String, default: '请选择'},

    //禁用
    disabled: {Boolean, default: false},

    //提示信息，当没有可选项目的时候，进行提示
    propTip: {String, default: '该字段'},

  },
  data() {
    return {
      tipShow: false,
      tipMsg: '',
    }
  },
  methods: {
    //改变事件
    change() {
      let selectItem = this.getData().filter(row => row[this.propFieldValue] == this.propThat.form[this.propFieldModel])
      if (selectItem && selectItem.length > 1) {
        this.showTip(this.propTip + '下拉框出现了重复值，请检查')
        return {}
      }

      if (!selectItem || selectItem.length < 1) {
        this.showTip(this.propTip + this.propTip + '下拉框未找到所选值，请检查')
        return {}
      }
      this._setValue(selectItem[0])
      this.$emit('change', selectItem[0])
    },

    //改变事件
    getData(isSelect) {
      let data = utilVuex[this.propVuexFunName]()

      //如果表单项有值，但是可选列表没有对应的，则追加，
      if (this.strings.isNotBlank(this.propForm[this.propFieldModel])) {
        let findIndex = data.findIndex(row => row[this.propFieldValue] == this.propThat.form[this.propFieldModel])
        if (findIndex == -1) {
          data.push({
            [this.propFieldModel]: this.propForm[this.propFieldModel],
            [this.propFieldValue]: this.propForm[this.propFieldModel],
            [this.propFieldTextLeft]: this.propForm[this.propTextModel],
          })
        }
      }
      if (isSelect && isSelect == true &&  (!data || data.length < 1)) {
        this.showTip(this.propTip + '没有可选项，请联系管理员维护')
      }
      return data
    },

    //改变事件
    getEl() {
      return this.$refs.fortenFormSelect
    },

    //改变事件
    showTip(msg) {
      this.tipShow = true
      this.tipMsg = msg
      setTimeout(() => {
        this.tipShow = false
      }, 5000)
    },

    //设置中心仓库
    setCenter() {
      //当前仓库如果是中心仓库，则直接选中，如果中心仓库只有一个，直接选中
      let getCurrentWarehouse = utilVuex.getCurrentWarehouse()

      //所选的是中心仓库
      if (getCurrentWarehouse && getCurrentWarehouse.flagCenter) {
        this._setValue(getCurrentWarehouse)
        this.change()
        return
      }

      //请领仓库是中心仓库
      if (getCurrentWarehouse && getCurrentWarehouse.applyWarehouseId) {
        let findArr = utilVuex.getWarehouseAll().filter(row => row.id == getCurrentWarehouse.applyWarehouseId)
        if (findArr && findArr.length == 1 && findArr[0].flagCenter) {
          this._setValue(findArr[0])
          this.change()
          return
        }
      }

      //可选的数据只有一个
      if (this.getData().length == 1) {
        this._setValue(this.getData()[0])
        this.change()
        return
      }

      //可选的数据有多个
      if (this.getData().length > 1) {
        this.showTip(this.propTip + '有多个选项，请手动选择')
        return
      }

      this.showTip(this.propTip + '没有可选项，请联系管理员维护')
    },

    //设置仓库为当前所选择的仓库
    setWarehouse() {
      //当前仓库如果是中心仓库，则直接选中，如果中心仓库只有一个，直接选中
      let getCurrentWarehouse = utilVuex.getCurrentWarehouse()

      //请领仓库是中心仓库
      if (getCurrentWarehouse && getCurrentWarehouse.warehouseId) {
        let findArr = utilVuex.getWarehouseAll().filter(row => row.id == getCurrentWarehouse.warehouseId)
        if (findArr && findArr.length == 1) {
          this._setValue({
            [this.propFieldValue]: findArr[0].id,
            [this.propFieldTextLeft]: findArr[0].name,
          })
          this.change()
          return null
        }
      }
    },

    //设置科室 根据用户所拥有科室列表
    setDeptByUser() {
      //当前仓库如果是中心仓库，则直接选中，如果中心仓库只有一个，直接选中
      let getCurrentUser = utilVuex.getCurrentUser()
      let findArr = utilVuex.getDeptListByUser().filter(row => row.id == getCurrentUser.deptId)
      if (!findArr || findArr.length < 1) {
        this.showTip(this.propTip + '请手动选择，当前登录用户所在科室没有在可选列表')
        return
      }

      this._setValue({
        id: getCurrentUser.deptId,
        name: getCurrentUser.deptName
      })
      this.change()
    },

    //设置值
    _setValue(setOb) {
      if (!this.propThat) {
        console.warn(this.propTip + 'propThat不存在')
        return
      }
      if (!this.propThat.form) {
        console.warn(this.propTip + 'propThat.form不存在')
        return
      }

      if (!setOb || setOb == undefined) {
        console.warn(this.propTip + 'setOb不存在')
        return
      }
      console.log(this.propTip + 'setOb', setOb)
      this.propThat.$set(this.propThat.form, this.propFieldModel, setOb[this.propFieldValue])
      this.propThat.$set(this.propThat.form, this.propTextModel, setOb[this.propFieldTextLeft])
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
